<template>
  <div 
    class="window" 
    :class="{ 'maximized': isMaximized }"
    :style="windowStyle"
    ref="windowRef"
  >
    <div 
      class="window-header" 
      style="cursor: move;"
    >
      <div class="window-title">{{ window.name }}</div>
      <div class="window-controls">
        <button class="window-btn minimize" @click="$emit('minimize')">─</button>
        <button class="window-btn maximize" @click="$emit('toggleMaximize')">□</button>
        <button class="window-btn close" @click="$emit('close')">✕</button>
      </div>
    </div>
    <div class="window-content">
      <iframe
        v-if="window.url"
        :src="window.url"
        class="window-iframe"
        frameborder="0"
        allowfullscreen
      />
      <component :is="window.componentInstance" v-else-if="window.componentInstance" />
      <component :is="window.component" v-else-if="window.component" />
      <div v-else class="default-window-content">
        <p>这里是 {{ window.name }} 的内容</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import useDraggable from '../../../utils/drag'

const props = defineProps({
  window: {
    type: Object,
    required: true
  },
  position: {
    type: Object,
    default: () => ({ x: 100, y: 100 })
  },
  isMaximized: {
    type: Boolean,
    default: false
  }
})

const windowRef = ref(null)
const { position: dragPos } = useDraggable(windowRef, { x: props.position.x, y: props.position.y })

const windowStyle = computed(() => {
  if (props.isMaximized) {
    return {
      top: '0',
      left: '0',
      width: '100%',
      height: 'calc(100% - 40px)'
    }
  }
  return {
    top: `${dragPos.value.y}px`,
    left: `${dragPos.value.x}px`
  }
})
</script>

<style scoped lang="scss">
.window {
  position: absolute;
  width: 600px;
  height: 400px;
  background-color: #f0f0f0;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  z-index: 10;
  display: flex;
  flex-direction: column;
  transition: all 0.2s ease;
  
  &.maximized {
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: calc(100% - 40px) !important;
    border-radius: 0;
  }
}

.window-header {
  height: 32px;
  background-color: #0078d7;
  color: white;
  display: flex;
  align-items: center;
  padding: 0 10px;
  cursor: move;
  
  .window-title {
    flex: 1;
    font-size: 12px;
    padding-left: 5px;
  }
  
  .window-controls {
    display: flex;
    
    .window-btn {
      width: 46px;
      height: 32px;
      background: none;
      border: none;
      color: white;
      font-size: 12px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      
      &:hover {
        background-color: rgba(255, 255, 255, 0.2);
      }
      
      &.close:hover {
        background-color: #e81123;
      }
    }
  }
}

.window-content {
  flex: 1;
  background-color: white;
  padding: 0;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
  position: relative;
}

.window-iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0 0 8px 8px;
  box-shadow: none;
  background: white;
  transition: box-shadow 0.3s, border-radius 0.3s;
  overflow: hidden;
  display: block;
}

.default-window-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
}
</style>